<template>
    <div class="edit_line" :class="noborder?'noborder':''">
      <div class="edit_label" :class="boldtitle ? 'bold_title' : ''">
        <span v-if="important" class="edit_important">*</span>
        {{label}}
     </div>
      <div class="edit_value">
        <!-- <div class="readonly_value" v-if="readonly">{{value}}</div> -->
        <group>
          <datetime :min-year="beginYear" :readonly="readonly" :max-year="endYear" value-text-align="left"
          :placeholder="placeholder" @on-change="change" :value="value|dateFormat"></datetime>
        </group>
      </div>
    </div>
</template>

<script>
  import { Datetime, Group ,PopupRadio } from 'vux'
  export default {
    name: 'edit-date-line',
    components: {
      Datetime, Group , PopupRadio
    },
    props: {
      beginYear: {
        type: Number,
        default: 1900
      },
      endYear: {
        type: Number,
        default: 2100
      },
      label: {
        type: String,
        default: ''
      },
      placeholder: {
        type: String,
        default: '请选择'
      },
      important: {
        type: Boolean,
        default: false
      },
      value : {
        type: String,
        default: ''
      },
      boldtitle : {
        type: Boolean,
        default: false
      },
      noborder: {
        type: Boolean,
        default: false
      },
      readonly: {
        type: Boolean,
        default: false
      },
    },
    mounted(){
    },
    beforeUpdate(){
    },
    methods: {
      change(val) {
        this.$emit('input', val)
        this.$emit('on-change', val)
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>

  .edit_line {
    width: 100%;
    line-height: 44px;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
    position: relative;
    &.noborder{
        border-bottom: none;
    }
    .edit_label {
      width: 36%;
      line-height: 44px;
      text-align: right;
      float: left;
      padding-right: 10px;
      .edit_important {
        width: 10px;
        color: red;
      }
      &.bold_title{
        font-weight: 600;
      }
    }
    .edit_value {
      width: 64%;
      float: left;
      font-size: 14px;
      text-align: right;
      color: #2c3e50;
      padding-right: 20px;
      input {
        width: 100%;
        font-size: 14px;
        padding-left: 15px;
        color: #2c3e50;
      }
    }
    .show_value {
      width: 64%;
      float: left;
      text-align: left;
    }
    .edit_select-control {
      flex: 3;
      text-align: left;
    }
    .edit_date-control {
      flex: 3;
      text-align: left;
    }
  }
</style>
